<template>
    <view class="content">
        <view class="navbar">
            <text class="navbar-title">微信API封装示例</text>
        </view>

        <view class="container">
            <!-- 完整示例链接 -->
            <view class="section">
                <text class="section-title">完整示例</text>
                <view class="button-group">
                    <button class="btn primary" @click="navigateToCompleteDemo">查看完整示例</button>
                </view>
            </view>
            
            <!-- 存储相关 -->
            <view class="section">
                <text class="section-title">存储相关</text>
                <input v-model="storageKey" placeholder="键名" class="input" />
                <input v-model="storageValue" placeholder="键值" class="input" />
                <view class="button-group">
                    <button class="btn primary" @click="setStorage">设置存储</button>
                    <button class="btn success" @click="getStorage">获取存储</button>
                    <button class="btn warning" @click="removeStorage">删除存储</button>
                    <button class="btn error" @click="clearStorage">清空存储</button>
                </view>
                <text class="result-text">获取结果: {{ storageResult }}</text>
            </view>

            <!-- 界面交互 -->
            <view class="section">
                <text class="section-title">界面交互</text>
                <view class="button-group">
                    <button class="btn primary" @click="showToast">显示Toast</button>
                    <button class="btn success" @click="showSuccessToast">显示成功提示</button>
                    <button class="btn warning" @click="showModal">显示模态框</button>
                    <button class="btn error" @click="showActionSheet">显示操作菜单</button>
                </view>
            </view>

            <!-- 网络相关 -->
            <view class="section">
                <text class="section-title">网络相关</text>
                <view class="button-group">
                    <button class="btn primary" @click="getNetworkType">获取网络状态</button>
                    <button class="btn success" @click="getSystemInfo">获取系统信息</button>
                </view>
                <text class="info-text">网络状态: {{ networkType }}</text>
                <text class="info-text">系统信息: {{ systemInfo }}</text>
            </view>

            <!-- 文件相关 -->
            <view class="section">
                <text class="section-title">文件相关</text>
                <view class="button-group">
                    <button class="btn primary" @click="chooseImage">选择图片</button>
                </view>
                <view v-if="imagePath" class="image-preview">
                    <image :src="imagePath" mode="widthFix" style="width: 200rpx;"></image>
                </view>
            </view>

            <!-- 位置相关 -->
            <view class="section">
                <text class="section-title">位置相关</text>
                <view class="button-group">
                    <button class="btn primary" @click="getLocation">获取当前位置</button>
                </view>
                <text class="info-text">位置信息: {{ locationInfo }}</text>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import { storage, ui, network, device, file, location } from '../../utils/wechat/index.js'

// 响应式数据
const storageKey = ref('')
const storageValue = ref('')
const storageResult = ref('')
const networkType = ref('')
const systemInfo = ref('')
const imagePath = ref('')
const locationInfo = ref('')

// 导航到完整示例页面
const navigateToCompleteDemo = () => {
  uni.navigateTo({
    url: '/views/examples/wechat-api-complete'
  })
}

// 存储相关方法
const setStorage = () => {
    if (!storageKey.value) {
        ui.showToast('请输入键名')
        return
    }

    const success = storage.set(storageKey.value, storageValue.value)
    if (success) {
        ui.showToast('存储成功', { icon: 'success' })
    } else {
        ui.showToast('存储失败')
    }
}

const getStorage = () => {
    if (!storageKey.value) {
        ui.showToast('请输入键名')
        return
    }

    const value = storage.get(storageKey.value, '未找到')
    storageResult.value = value
    ui.showToast('获取成功', { icon: 'success' })
}

const removeStorage = () => {
    if (!storageKey.value) {
        ui.showToast('请输入键名')
        return
    }

    const success = storage.remove(storageKey.value)
    if (success) {
        ui.showToast('删除成功', { icon: 'success' })
    } else {
        ui.showToast('删除失败')
    }
}

const clearStorage = () => {
    const success = storage.clear()
    if (success) {
        ui.showToast('清空成功', { icon: 'success' })
    } else {
        ui.showToast('清空失败')
    }
}

// 界面交互方法
const showToast = () => {
    ui.showToast('这是一条提示信息')
}

const showSuccessToast = () => {
    ui.showToast('操作成功', { icon: 'success' })
}

const showModal = async () => {
    try {
        const res = await ui.showModal('提示', '这是一个模态框示例')
        if (res.confirm) {
            ui.showToast('您点击了确定')
        } else if (res.cancel) {
            ui.showToast('您点击了取消')
        }
    } catch (err) {
        console.error('显示模态框失败:', err)
    }
}

const showActionSheet = async () => {
    try {
        const res = await ui.showActionSheet(['选项一', '选项二', '选项三', '取消'])
        ui.showToast(`您选择了选项${res.tapIndex + 1}`)
    } catch (err) {
        // 用户取消选择
        if (err.errMsg && err.errMsg.includes('cancel')) {
            ui.showToast('您取消了选择')
        } else {
            console.error('显示操作菜单失败:', err)
        }
    }
}

// 网络相关方法
const getNetworkType = async () => {
    try {
        const res = await network.getNetworkType()
        networkType.value = res.networkType
        ui.showToast('获取成功', { icon: 'success' })
    } catch (err) {
        console.error('获取网络状态失败:', err)
        ui.showToast('获取失败')
    }
}

const getSystemInfo = async () => {
    try {
        const res = await device.getSystemInfo()
        systemInfo.value = `${res.brand} ${res.model} (${res.system})`
        ui.showToast('获取成功', { icon: 'success' })
    } catch (err) {
        console.error('获取系统信息失败:', err)
        ui.showToast('获取失败')
    }
}

// 文件相关方法
const chooseImage = async () => {
    try {
        const res = await file.chooseImage({ count: 1 })
        imagePath.value = res.tempFilePaths[0]
        ui.showToast('选择成功', { icon: 'success' })
    } catch (err) {
        console.error('选择图片失败:', err)
        ui.showToast('选择失败')
    }
}

// 位置相关方法
const getLocation = async () => {
    try {
        const res = await location.getLocation()
        locationInfo.value = `纬度: ${res.latitude}, 经度: ${res.longitude}`
        ui.showToast('获取成功', { icon: 'success' })
    } catch (err) {
        console.error('获取位置失败:', err)
        // 检查是否是权限问题
        if (err.errMsg && err.errMsg.includes('fail auth')) {
            ui.showToast('请授权位置权限')
        } else {
            ui.showToast('获取失败')
        }
    }
}
</script>

<style>
.content {
    padding: 20rpx;
    background-color: #f5f5f5;
    min-height: 100vh;
}

.navbar {
    background-color: #007aff;
    color: white;
    padding: 30rpx 20rpx;
    text-align: center;
    position: relative;
    z-index: 999;
}

.navbar-title {
    font-size: 36rpx;
    font-weight: bold;
}

.container {
    padding-top: 20rpx;
}

.section {
    background-color: #fff;
    padding: 30rpx;
    border-radius: 10rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    margin-bottom: 20rpx;
}

.section-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 30rpx;
    display: block;
    color: #333;
}

.input {
    border: 1rpx solid #ddd;
    padding: 20rpx;
    border-radius: 10rpx;
    margin-bottom: 20rpx;
    font-size: 28rpx;
}

.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10rpx;
    margin-bottom: 20rpx;
}

.btn {
    flex: 1;
    min-width: 45%;
    padding: 20rpx;
    border-radius: 10rpx;
    border: none;
    color: white;
    font-size: 28rpx;
    text-align: center;
    margin: 5rpx 0;
}

.btn.primary {
    background-color: #007aff;
}

.btn.success {
    background-color: #4cd964;
}

.btn.warning {
    background-color: #f0ad4e;
}

.btn.error {
    background-color: #dd524d;
}

.result-text,
.info-text {
    display: block;
    margin-top: 10rpx;
    font-size: 28rpx;
    color: #666;
}

.image-preview {
    display: flex;
    justify-content: center;
    margin-top: 20rpx;
}
</style>